<template>
  <view class="my">
    <!-- <u-loading-page
      :loading="loading"
      loading-text="加载中..."
      loading-mode="semicircle"
    ></u-loading-page> -->
    <view class="header">
      <view
        class="info"
        :style="{
          marginBottom:
            !permission.a && !permission.b && !permission.c ? '130rpx' : ''
        }"
      >
        <view class="left">
          <view class="name">{{ form.name }}</view>
          <view class="grade" v-if="role_id == 8">
            <view class="grade-item">
              <view class="a">{{ form.score_server }}</view>
              <view class="b">接待服务</view>
            </view>
            <view class="grade-item">
              <view class="a">{{ form.score_goods }}</view>
              <view class="b">产品品质</view>
            </view>
            <view class="grade-item">
              <view class="a">{{ form.score_environ }}</view>
              <view class="b">售后服务</view>
            </view>
          </view>
        </view>
        <view class="right">
          <div class="pic">
            <image :src="form.image" mode="scaleToFill" />
          </div>
        </view>
      </view>
      <view
        class="function"
        :style="{
          display: !permission.a && !permission.b && !permission.c ? 'none' : ''
        }"
      >
        <view class="function-item" @click="goToActivity" v-if="permission.a">
          <view class="a"
            ><image
              src="https://oss.xhoven.com/4f874bfaab5550c8d5419450aae7a09d.png"
              mode="scaleToFill"
          /></view>
          <view class="b">创建活动</view>
        </view>
        <view
          class="function-item"
          @click="goToActivityList"
          v-if="permission.b"
        >
          <view class="a"
            ><image
              src="https://oss.xhoven.com/22fe0fb9b5afda0952c93194217dd0bf.png"
              mode="scaleToFill"
          /></view>
          <view class="b">活动管理</view>
        </view>
        <view class="function-item" @click="scanEvent" v-if="permission.c">
          <view class="a"
            ><image
              src="https://oss.xhoven.com/ca9b0e8d1ef53150d842ed1f158a3644.png"
              mode="scaleToFill"
          /></view>
          <view class="b">扫码核销</view>
        </view>
      </view>
    </view>
    <view class="body">
      <view class="title" v-if="authList.length">授权管理</view>
      <view class="card" v-if="authList.length">
        <view
          class="line"
          v-for="(v, i) in authList"
          :key="i"
          @click="clickEventA(v.id)"
        >
          <view class="label">
            <view class="icon">
              <image :src="v.icon" mode="scaleToFill" />
            </view>
            <view class="label-title">{{ v.title }}</view>
          </view>
          <view class="value">
            <view class="value-v">{{ v.value }}</view>
            <image
              class="arrow"
              src="https://oss.xhoven.com/4882b9581b21fdb6a74f5d574731a9d2.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
      <view class="title">账号管理</view>
      <view class="card">
        <view
          class="line"
          v-for="(v, i) in accountList"
          :key="i"
          @click="clickEventB(i)"
        >
          <view class="label">
            <view class="icon">
              <image :src="v.icon" mode="scaleToFill" />
            </view>
            <view class="label-title">{{ v.title }}</view>
          </view>
          <view class="value">
            <view class="value-v">{{ v.value }}</view>
            <image
              class="arrow"
              src="https://oss.xhoven.com/4882b9581b21fdb6a74f5d574731a9d2.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="btn" @click="logOut">
      退出登录
    </view>
    <EditPassword
      :value="show.password"
      @input="show.password = $event"
      :mobile="form.mobile"
    />
    <EditMobile
      :value="show.mobile"
      @input="show.mobile = $event"
      :mobile="form.mobile"
      @update="updateEvent"
    />
    <EditSales ref="sales" :value="show.sales" @input="show.sales = $event" />
    <Editstore v-model="show.store" ref="store" />
    <Editmerchant v-model="show.merchant" ref="merchant" />
    <Tabs />
  </view>
</template>

<script>
import Tabs from '../../components/tabs.vue'
import Mynavbar from '../../components/Mynavbar.vue'
import EditPassword from '../../components/editPassword.vue'
import EditMobile from '../../components/editMobile.vue'
import EditSales from '../../components/editSales.vue'
import Editstore from '../../components/editstore.vue'
import Editmerchant from '../../components/editmerchant.vue'

export default {
  components: {
    Tabs,
    Mynavbar,
    EditPassword,
    EditMobile,
    EditSales,
    Editstore,
    Editmerchant
  },
  data () {
    return {
      role: '',
      form: {},
      role_id: '',
      authList: [],
      accountList: [],
      show: {
        password: false,
        mobile: false,
        sales: false,
        store: false,
        merchant: false
      },
      seconds: 10,
      countDown: '',
      permission: {
        a: false,
        b: false,
        c: false
      }
      // loading: false
    }
  },
  onLoad () {},
  onShow () {
    this.getDetail()
    this.role_id = uni.getStorageSync('id')
  },
  methods: {
    scanEvent () {
      uni.scanCode({
        success: async aa => {
          try {
            const res = await this.$api.common.cancellation({
              number: aa.result
            })
            uni.$u.toast('核销成功!')
          } catch (error) {
            console.log(error)
            uni.$u.toast(error.msg)
          }
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    updateEvent () {
      this.getDetail()
    },
    async getDetail () {
      this.authList = []
      this.permission = {
        a: false,
        b: false,
        c: false
      }
      // this.loading = true
      const res = await this.$api.my.Detail()
      this.form = res.data.info
      if (uni.getStorageSync('id') == 8) {
        this.form.score_server = this.form.score_server.toFixed(1)
        this.form.score_goods = this.form.score_goods.toFixed(1)
        this.form.score_environ = this.form.score_environ.toFixed(1)
      }
      if (res.data.info.store_images) {
        this.form.image = res.data.info.store_images[0]
      }
      const permission = res.data.menu.map(v => v.id)
      console.log(permission)
      if (permission.includes(87)) {
        this.authList.push({
          id: 87,
          title: '卖场入驻',
          icon: 'https://oss.xhoven.com/cbd5b3000cf05ad2506cada5303a5c07.png',
          value: res.data.menu.filter(v => v.id == 87)[0].store || ''
        })
      }
      if (permission.includes(88)) {
        this.authList.push({
          id: 88,
          title: '关联商户',
          icon: 'https://oss.xhoven.com/186790fffb104fb7370ff850c9c0cee3.png',
          value: res.data.menu.filter(v => v.id == 88)[0].business || ''
        })
      }
      if (permission.includes(89)) {
        this.authList.push({
          id: 89,
          title: '导购设置',
          icon: 'https://oss.xhoven.com/0f1b49d0d51c79c00cdd69828df2950c.png'
        })
      }
      if (permission.includes(84)) {
        this.permission.a = true
      }
      if (permission.includes(85)) {
        this.permission.b = true
      }
      if (permission.includes(86)) {
        this.permission.c = true
      }

      this.accountList = [
        {
          title: '绑定手机号',
          icon: 'https://oss.xhoven.com/b17d1e6613c783f8d30ae0ad5e3f5387.png',
          value: res.data.info.mobile
        },
        {
          title: '登录密码',
          icon: 'https://oss.xhoven.com/31d5c1bf9175ba2aa6f6be67bb036321.png',
          // value: res.data.info.password
          value: ''
        },
        {
          title: '绑定微信号',
          icon: 'https://oss.xhoven.com/e17e6fa7592d75e69cf3c290642eb644.png',
          value: res.data.info.wechat || '未绑定'
        },
        {
          title: '隐私协议',
          icon: 'https://oss.xhoven.com/f141386833161d316fb32d7f27006f56.png'
        }
      ]
      // this.loading = false
    },
    clickEventA (i) {
      switch (i) {
        case 87:
          this.showEditStore()
          break
        case 88:
          this.showEditMerchant()
          break
        case 89:
          this.showSalesList()
          break
        default:
          break
      }
    },
    clickEventB (i) {
      switch (i) {
        case 0:
          this.showEditMobile()
          break
        case 1:
          this.showEditPassword()
          break
        case 2:
          this.bindWechat()
          break
        case 3:
          uni.navigateTo({
            url: '/subpackages/privacyAgreement/privacyAgreement'
          })
          break
        default:
          break
      }
    },
    showEditPassword () {
      this.show.password = true
    },
    showEditMobile () {
      this.show.mobile = true
    },
    showSalesList () {
      this.show.sales = true
      this.$refs.sales.getList()
      this.$refs.sales.getOptionsList()
    },
    showEditStore () {
      this.show.store = true
      this.$refs.store.getDetail()
      this.$refs.store.setMobile(this.form.mobile)
    },
    showEditMerchant () {
      this.show.merchant = true
      this.$refs.merchant.getDetail()
      this.$refs.merchant.setMobile(this.form.mobile)
    },
    bindWechat () {
      if (this.form.wechat) {
        uni.showModal({
          title: '提示',
          content: '当前账号已绑定微信,是否确定解绑微信?',
          showCancel: true,
          success: ({ confirm, cancel }) => {
            if (confirm) {
              uni.login({
                success: async v => {
                  try {
                    const res = await this.$api.my.unBindAdmin({
                      code: v.code
                    })
                    uni.hideLoading()
                    uni.$u.toast('解绑成功!')
                    this.getDetail()
                  } catch (error) {
                    uni.hideLoading()
                    uni.$u.toast(error.msg)
                  }
                }
              })
            } else {
            }
          }
        })
        return
      }
      uni.showLoading({
        title: '绑定中',
        mask: true
      })
      uni.login({
        success: async v => {
          try {
            const res = await this.$api.my.bindAdmin({
              code: v.code
            })
            uni.hideLoading()
            uni.$u.toast('绑定成功!')
            this.getDetail()
          } catch (error) {
            uni.hideLoading()
            uni.$u.toast(error.msg)
          }
        }
      })
    },
    goToActivity () {
      uni.navigateTo({ url: '/subpackages/activity/activity?mode=add' })
    },
    goToActivityList () {
      uni.navigateTo({ url: '/subpackages/activity/activityList' })
    },
    logOut () {
      uni.clearStorage()
      uni.reLaunch({ url: '/subpackages/login/login' })
    }
  }
}
</script>

<style lang="less" scoped>
.my {
  .header {
    width: 100%;
    height: 600rpx;
    background-image: linear-gradient(to right top, #f3fcf2, #d8e3ff);
    padding: 0 35rpx;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
    .info {
      width: 100%;
      height: 215rpx;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        width: 100%;
        .name {
          font-size: 34rpx;
          margin-bottom: 10rpx;
          color: #333333;
          white-space: nowrap;
          overflow: hidden;
          letter-spacing: 2rpx;
          text-overflow: ellipsis;
          width: 436rpx;
          font-weight: 600;
        }
        .grade {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .grade-item {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .a {
              color: #333;
              font-weight: 600;
              font-size: 35rpx;
            }
            .b {
              font-size: 20rpx;
              color: #999;
            }
          }
        }
      }
      .right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 380rpx;
        .pic {
          width: 186rpx;
          height: 186rpx;
          border-radius: 186rpx;
          border: 2px solid #fff;
          overflow: hidden;
          background-color: blueviolet;
        }
      }
    }
    .function {
      background-color: #fff;
      border-radius: 20rpx 20rpx 0 0;
      width: 100%;
      height: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .function-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .a {
          width: 66rpx;
          height: 66rpx;
          margin-bottom: 10rpx;
        }
        .b {
          color: #333333;
          font-size: 26rpx;
        }
      }
    }
  }
  .body {
    padding: 0 35rpx;
    .title {
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
      margin: 40rpx 0 20rpx 0;
      width: 100%;
    }
    .card {
      background-color: #fff;
      width: 100%;
      border-radius: 20rpx;
      padding: 30rpx 20rpx 10rpx 20rpx;
      .line {
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 25rpx;
        margin-bottom: 32rpx;
        display: flex;
        justify-content: space-between;
        align-content: center;
        &:last-child {
          border: 0;
          margin-bottom: 0;
        }
        .label {
          display: flex;
          justify-content: center;
          align-items: center;
          .icon {
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;
          }
          .label-title {
            color: #333;
            font-weight: 600;
            font-size: 24rpx;
          }
        }
        .value {
          display: flex;
          justify-content: center;
          align-items: center;
          .value-v {
            color: #666;
            font-size: 26rpx;
            margin-right: 10rpx;
          }
          .arrow {
            width: 20rpx !important;
            height: 20rpx !important;
          }
        }
      }
    }
  }
  .btn {
    width: 690rpx;
    height: 90rpx;
    background-color: #3e73fe;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    letter-spacing: 6rpx;
    font-size: 30rpx;
    margin: 60rpx auto;
  }
}
</style>
